<template>
  <div id="Shopping-confirm">
    <IndexTop :c2="false" :c3="false"></IndexTop>
    <Shopping-Top :s1="false" :s3="false"></Shopping-Top>
    <div class="confirm-box">
      <span>收货人</span>
      <span>使用新地址</span>
    </div>
    <div v-for="(item, index) in arr" v-bind:key="index" class="address">
      <div class="address-Div1">
        <input type="radio" name="1" :checked="index == 0 ? true : false" />
        <span>{{ item.name }}</span>
        <span>{{ item.city }}</span>
        <span>{{ item.city1 }}</span>
        <span>{{ item.city2 }}</span>
        <span>{{ item.city3 }}</span>
        <span>{{ item.phone }}</span>
        <span :class="{ no: !item.falg }">{{ item.text }}</span>
      </div>
      <div class="address-Div2">
        <span @click="def(index)" :class="{ no: item.falg }">{{
          item.default
        }}</span>
        <span>{{ item.modify }}</span>
        <span>{{ item.delete }}</span>
      </div>
    </div>
    <div class="open-away">
      <span class="open">展开其他地址</span>
      <img src="../../assets/Shopping/下拉.png" alt="下拉" />
      <span class="put-away">收起地址</span>
      <img src="../../assets/Shopping/上拉.png" alt="上拉" />
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import IndexTop from "../zfc/IndexTop";
import Footer from "../Footer";
import ShoppingTop from "./Shopping-Top";
export default {
  name: "Shopping-confirm",
  data() {
    return {
      arr: [
        {
          name: "但小兵",
          city: "北京",
          city1: "北京市",
          city2: "昌平区",
          city3: "天通苑明天第一城4号楼101",
          phone: "固定电话010-21541589 ",
          text: "默认地址",
          default: "设置为默认地址",
          modify: "修改",
          delete: "删除",
          falg: false,
        },
        {
          name: "但小兵",
          city: "北京",
          city1: "北京市",
          city2: "昌平区",
          city3: "天通苑明天第一城4号楼101",
          phone: "手机121541589 ",
          text: "默认地址",
          default: "设置为默认地址",
          modify: "修改",
          delete: "删除",
          falg: false,
        },
        {
          name: "但小兵",
          city: "北京",
          city1: "北京市",
          city2: "昌平区",
          city3: "天通苑明天第一城4号楼101",
          phone: "手机121541589 ",
          text: "默认地址",
          default: "设置为默认地址",
          modify: "修改",
          delete: "删除",
          falg: false,
        },
        {
          name: "但小兵",
          city: "北京",
          city1: "北京市",
          city2: "昌平区",
          city3: "天通苑明天第一城4号楼101",
          phone: "手机121541589",
          text: "默认地址",
          default: "设置为默认地址",
          modify: "修改",
          delete: "删除",
          falg: false,
        },
      ],
    };
  },
  methods: {
    def(index) {
      this.arr.forEach((item) => {
        item.falg = false;
      });
      this.arr[index].falg = true;
    },
  },
  components: {
    IndexTop,
    Footer,
    ShoppingTop,
  },
};
</script>
<style scoped>
.confirm-box {
  width: 1280px;
  height: 58px;
  line-height: 58px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #ccc;
}
.confirm-box span:nth-child(1) {
  font-size: 18px;
  color: #666666;
}
.confirm-box span:nth-child(2) {
  display: block;
  width: 90px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: #f08200;
  font-size: 14px;
  color: #fff;
  border-radius: 10px;
  margin-top: 14px;
}
.address {
  width: 1280px;
  height: 40px;
  line-height: 40px;
  margin: 0 auto;
  background-color: #f4fff2;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.address-Div1 input {
  margin-left: 15px;
}
.address-Div1 span {
  font-size: 14px;
  color: #666;
  margin-left: 5px;
}
.address-Div1 span:nth-child(1) {
  margin-left: 13px;
}
.address-Div1 span:nth-last-child(1) {
  color: #999;
  margin-left: 13px;
}
.address-Div1 {
  width: 650px;
  height: 40px;
}
.address-Div2 {
  width: 250px;
  height: 40px;
  display: flex;
  justify-content: space-around;
  font-size: 14px;
}
.no {
  opacity: 0;
}
.address-Div2 span {
  color: #498e3d;
}
.address-Div2 span:nth-child(1) {
  color: #f08200;
}
.open-away {
  width: 1280px;
  height: 45px;
  margin: 0 auto;
  margin-top: 10px;
  border-bottom: 1px solid #ccc;
}
.open,
.put-away {
  font-size: 16px;
  color: #498e3d;
}
.put-away {
  margin-left: 20px;
}
.open-away img {
  margin-left: 10px;
}
</style>
